<template>
    <h1> app vue3 学习</h1>

    <ul>
        <li>vue</li>
        <li>react</li>
        <li> node </li>
    </ul>

    <div class="container">
        <p>X 轴：{{ x }} Y 轴：{{ y }}</p>
        <hr />
        <div>
            <p id="pBox">{{ count }}</p>
            <button @click="add()">自增</button>
        </div>
    </div>

    <hr>
    <div id="divBox"> {{ msg }} </div>
    <button @click="change">修改数据</button>


    <hr>



    <div> 学习vue3 响应式对象</div>
    <p> {{ obj.name }}---{{ obj.age }} </p>

    <button @click="changeObj">修改对象数据</button>


    <hr>

    <ul>
        <li v-for="item, index in arr" @click="delHandler(index)"> {{ item }}</li>
    </ul>

</template>

<script>
import { ref, onMounted, reactive } from 'vue'


export default {

    setup () {
        // 定义数据
        const x = ref(0);  // 对象
        const y = ref(0);
        // 定义方法
        const move = (e) => {
            x.value = e.clientX;
            y.value = e.clientY
        }
        onMounted(() => {
            document.addEventListener('mousemove', move)

        })

        // let count = 10; // 定义普通数据 
        // vue2 或者vue3 给你的相关方法的或者指令
        const count = ref(10)  // 定义响应式数据  proxy 代理  对象
        const add = () => {
            console.log(count);
            count.value++
            // console.log(count);
            // document.getElementById('pBox').innerHTML = count  原生js
        }


        let msg = 'hello vue3'

        const change = () => {
            msg = '你好'
            document.getElementById('divBox').innerHTML = msg
        }

        // 定义一个 普通对象 obj={name:'zs',age:19}
        //    定义一个响应式对象 reactive
        //   reactive 一般定义为复杂数据类型  
        //   ref  可以定义任何数据类型  一般定义简单数据类型
        const obj = reactive({ name: 'zs', age: 19 })

        const changeObj = () => {

            // alert(1)
            // console.log(obj.name);
            obj.name = '老王'
        }


        // const arr = ['a', 'b', 'c'] // 不是响应式
        // const delHandler = (i) => {
        //     // arr.splice(i, 1)
        //     // arr.push('ccc')
        //     // console.log(arr);
        //     arr[arr.length] = '新增'
        // }

        const arr = reactive(['a', 'b', 'c'])
        const delHandler = (i) => {
            arr.splice(i, 1)
        }



        return {
            x,
            y,
            count,
            msg,
            add,
            change,
            obj,
            changeObj,
            arr,
            delHandler

        }
    }

}


</script>





